<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title *ngIf="!showSearchbar">
      {{'messages_title' | translate}}
      <ion-icon name="chevron-down-outline" class="message-icon-middle"></ion-icon>
    </ion-title>
    <ion-searchbar [formControl]="searchMessageList" showCancelButton="always" cancelButtonIcon="arrow-back-outline"
      (ionCancel)="showSearchbar = false" [placeholder]="'messages_search_title' | translate" *ngIf="showSearchbar">
    </ion-searchbar>
    <ion-buttons slot="end">
      <ion-button *ngIf="!isIos && !showSearchbar" (click)="(showSearchbar = true)">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
      <ion-button *ngIf="!showSearchbar">
        <ion-icon slot="icon-only" name="create-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-down-outline"></ion-refresher-content>
  </ion-refresher>

  <ion-searchbar [formControl]="searchMessageList" cancelButtonIcon="arrow-back-outline"
    [placeholder]="'messages_search_title' | translate" *ngIf="isIos">
  </ion-searchbar>
  <ion-list lines="none" class="ion-padding-bottom">
    <ion-item-sliding *ngFor="let user of messagesList">
      <ion-item button detail="false" [routerLink]="['/message-detail', user.id]" routerdirection="forward">
        <ion-avatar slot="start">
          <img [src]="user.image">
        </ion-avatar>
        <ion-label>
          <h2>{{user.first_name}} {{user.last_name}}</h2>
          <p>{{user.last_message}}</p>
        </ion-label>
      </ion-item>

      <ion-item-options side="start">
        <ion-item-option color="medium">
          <ion-icon slot="start" name="volume-mute-outline"></ion-icon>
          <ion-label>
            Close
          </ion-label>
        </ion-item-option>
        <ion-item-option color="danger" expandable>
          <ion-icon slot="start" name="trash-outline"></ion-icon>
          <ion-label>
            More
          </ion-label>
        </ion-item-option>
      </ion-item-options>

      <ion-item-options side="end">
        <ion-item-option color="medium">
          <ion-icon slot="start" name="volume-mute-outline"></ion-icon>
          <ion-label>
            Mute
          </ion-label>
        </ion-item-option>
        <ion-item-option color="danger" expandable>
          <ion-icon slot="start" name="trash-outline"></ion-icon>
          <ion-label>
            Delete
          </ion-label>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>